<template>
    <view class="main">
        <!-- :offset-top="236.5 + systemInfo.titleTop" -->
        <!-- <tn-sticky> -->
        <view :style="{ paddingTop: systemInfo.titleTop + 'px' }" class="top">
            <view class="back dispaly-center" @click="navTo('back')"
                :style="{ height: systemInfo.sBarHeight + 'px', lineHeight: systemInfo.sBarHeight + 'px' }">
                <tn-icon name="left" color="#fff" size="40" />
            </view>
            <view class="d-desc dispaly-just-between">
                <view class="left">
                    <view class="left-top dispaly-center">
                        <view class="title">{{ conName }}</view>
                        <view class="g-w" v-if="is_care == 0" @click="care(queryData.company_id as number)">关注</view>
                        <view class="g-z" v-else @click="cancenCare(queryData.company_id as number)">已关注</view>
                    </view>
                    <view class="left-bottom">{{ area }}</view>
                </view>
                <view class="right">
                    <image :src="logo" />
                </view>
            </view>
        </view>
        <!-- </tn-sticky> -->

        <view class="content" :style="{ minHeight: newsPanelHeight + 'px' }">
            <view class="dispaly-just-between search">
                <view class="ipt">
                    <tn-search-box @search="search" :search-button="false" :border="false" v-model="queryData.keywords"
                        placeholder="搜索职位" size="sm" />
                </view>

                <view class="cate w-100">
                    <view class="item dispaly" @click="navTo(`/subPackage/index/selectCityPage`)">
                        <view class="text">地域</view>
                        <view class="s">
                            <image src="/static/icon/s.png" />
                        </view>
                    </view>
                    <view class="item dispaly" @click="cateOpen">
                        <view class="text">筛选</view>
                        <view class="s">
                            <image src="/static/icon/s.png" />
                        </view>
                    </view>
                </view>
            </view>

            <view class="list">
                <Empty v-if="!loadShow && !jobListData.length" text="暂无职位" />
                <view v-else class="item" v-for="item in jobListData" :key="item.id">
                    <view class="title-box dispaly-just-between">
                        <view class="title-left">
                            <view class="t-t">{{ item.job_name }}</view>
                            <view class="tip dispaly-center">
                                <view class="tip-item" v-for="tip in item.job_desc.split(',')" :key="tip">{{ tip }}
                                </view>
                            </view>
                        </view>
                        <view class="tt dispaly-align-center">投递</view>
                    </view>
                    <view class="detail dispaly-align-center"
                        @click="navTo(`/subPackage/index/jobDetail?id=${item.id}`)">
                        职位详情 ></view>
                </view>
                <LoadMore :status="status" :show="loadShow" />
            </view>

        </view>
        <!-- 地址 -->
        <!-- <SelectArea :tab="false" :show-popup="showPopup" @close="show => showPopup = show" /> -->
        <!-- 分类 -->
        <SelectCate :tab="false" v-if="jobCateListData.length" :data="jobCateListData" @confirm="confirm"
            :show-cate="cateShow" @close="show => cateShow = show" />
    </view>
</template>

<script setup lang="ts">
import { navTo } from '@/utils/util';
import { getScreenSHeight } from '@/utils/util'
import { onLoad, onReady, onReachBottom, onPullDownRefresh, onShow } from '@dcloudio/uni-app'
import SelectArea from '@/components/address/selectArea.vue';
import SelectCate from '@/pages/index/components/selectCate.vue'
import { ref, reactive } from 'vue'
import type { JobObjectDataType, CateType } from '@/types/responseData'
import { getJobList, getJobCate } from '@/api/home/home'
import type { RequestJobParmType } from '@/types/requstParm'
import type { RequestAddCareType } from '@/types/requstParm'
import { postAddCare, postCancelCare } from '@/utils/util'

// 添加关注
const formData = reactive<RequestAddCareType>({
    user_id: 2,
    relation_id: '',
    type: 2
})

const care = async (id: number) => {
    formData.relation_id = id
    const res = await postAddCare(formData)
    if (res == 'ok') {
        is_care.value = 1
    }
}

// 取消关注
const cancenCare = async (id: number) => {
    const res = await postCancelCare(id, 2)
    if (res == 'ok') {
        is_care.value = 0
    }
}


let logo = ref<string>('')
let conName = ref<string>('')
let area = ref<string>('')
let is_care = ref<number>()
onLoad((option) => {
    logo.value = option?.logo
    conName.value = option?.name
    area.value = option?.areas
    queryData.company_id = option?.id
    is_care.value = option?.is_care
    getListData()
})

onShow(() => {
    selCityGetData()
})

// 选择地址请求列表
const selCityGetData = () => {
    queryData.city_id = ''
    let pages = getCurrentPages()
    let currPage = pages[pages.length - 1] as any//当前页
    let id = currPage.data.id
    if (id) {
        queryData.city_id = id
        init()
        getListData()
        currPage.data.id = ''
    }
}

// 获取职位列表
const queryData = reactive<RequestJobParmType>({
    page: 1,
    limit: 10,
    keywords: '',
    company_id: '',
    cat_name: '',
    city_id: ''
})

// 选择的职位分类
const confirm = (valueId: number) => {
    queryData.cat_name = valueId
    init()
    getListData()
}

// 请求职位列表
const status = ref<string>('loadmore')
const loadShow = ref<boolean>(false)
let jobListData = ref<Array<JobObjectDataType>>([])
const getListData = async () => {
    status.value = 'loading'
    const res = await getJobList(queryData)
    if (res.code == 0) {
        if (res.data.list.length) {
            status.value = 'loadmore'
            loadShow.value = true
            jobListData.value = [...jobListData.value, ...res.data.list]
        } else {
            status.value = 'nomore'
        }
    }
}

const search = () => {
    init()
    queryData.cat_name = ''
    getListData()
}

// 初始化
const init = () => {
    // loadShow.value = false
    jobListData.value = []
    queryData.page = 1
}

// 获取职位分类
const jobCateListData = ref<Array<CateType>>([])
const getJobCateListData = async () => {
    const res = await getJobCate()
    if (res.code == 0) {
        jobCateListData.value = res.data
    }
}

const cateOpen = () => {
    cateShow.value = true
    getJobCateListData()
}

// 触底分页
onReachBottom(() => {
    (queryData.page as number)++
    getListData()
})

// 下拉刷新
onPullDownRefresh(async () => {
    uni.showLoading({
        title: '加载中'
    })
    queryData.cat_name = ''
    queryData.city_id = ''
    init()
    await getListData()
    uni.stopPullDownRefresh()
    uni.hideLoading()
})


// 分类弹窗
const cateShow = ref<boolean>(false)
// 地址弹窗
const showPopup = ref<boolean>(false)

const searchValue = ref<string>('')

const systemInfo = uni.getStorageSync('systemInfo')
// 获取屏幕剩余高度
const newsPanelHeight = ref<number>(0)
onReady(async () => {
    newsPanelHeight.value = await getScreenSHeight(uni.getStorageSync('systemInfo').sBarHeight + 473 / 2) as number
})
</script>
<style lang="scss" scoped>
:deep(.tn-search-box) {
    background-color: #fff !important;
}

.main {
    .top {
        height: 473rpx;
        background: #4C4C4C;
        border-radius: 0rpx 0rpx 0rpx 0rpx;

        .back {
            padding-left: 30rpx;
        }

        .d-desc {
            overflow: hidden;
            margin-top: 88rpx;
            padding: 0 30rpx;

            .left {
                .left-top {
                    .title {
                        font-family: PingFang SC, PingFang SC;
                        font-weight: bold;
                        font-size: 32rpx;
                        color: #FFFFFF;
                        margin-right: 13rpx;
                    }

                    .g-z {
                        width: 98rpx;
                        height: 42rpx;
                        border-radius: 21rpx;
                        border: 2rpx solid #FFFFFF;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #FFFFFF;
                    }

                    .g-w {
                        width: 98rpx;
                        height: 42rpx;
                        border-radius: 21rpx;
                        border: 2rpx solid #FFFFFF;
                        background-color: #fff;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #000;
                    }
                }

                .left-bottom {
                    margin-top: 20rpx;

                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 26rpx;
                    color: #BEBEBE;
                }
            }

            .right {
                image {
                    width: 96rpx;
                    height: 96rpx;
                    border-radius: 10rpx;
                }
            }
        }
    }

    .content {
        background-color: #efefef;
        border-radius: 20rpx 20rpx 0 0;
        margin-top: -30rpx;
        padding: 30rpx;

        .search {
            .ipt {
                margin-right: 17rpx;
                flex: 5;
            }
        }

        .cate {
            flex: 0.5;
            display: flex;
            justify-content: flex-end;

            .item:first-child {
                margin-right: 20rpx;
            }

            .item {
                background-color: #fff;
                border-radius: 10rpx;
                width: 96rpx;
                height: 60rpx;
                text-align: center;
                line-height: 60rpx;
                justify-content: center;

                .text {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #717171;
                }

                .s {
                    image {
                        width: 15rpx;
                        height: 15rpx;
                    }
                }
            }
        }

        .list {
            margin-top: 20rpx;
            display: flex;
            flex-direction: column;

            .item:last-child {
                margin-bottom: 0;
            }

            .item {
                background: #FFFFFF;
                border-radius: 20rpx;
                margin-bottom: 20rpx;
                padding: 25rpx;

                .title-box {
                    .title-left {
                        .t-t {
                            font-family: PingFang SC, PingFang SC;
                            font-weight: bold;
                            font-size: 30rpx;
                            color: #000000;
                        }

                        .tip {
                            margin: 14rpx 0;

                            .tip-item:last-child {
                                border-right: none;
                            }

                            .tip-item:first-child {
                                padding-left: 0;
                            }

                            .tip-item {
                                padding-right: 21rpx;
                                padding-left: 21rpx;
                                font-family: PingFang SC, PingFang SC;
                                font-weight: 400;
                                font-size: 28rpx;
                                color: #7E7E7E;
                                border-right: 1rpx solid #c1c1c1;
                            }
                        }
                    }

                    .tt {
                        width: 98rpx;
                        height: 42rpx;
                        background: rgba(0, 130, 152, 0.16);
                        border-radius: 21rpx;
                        border: 2rpx solid #008298;
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #008298;
                    }
                }

                .detail {
                    border-top: 1rpx solid #F1F1F1;
                    padding: 22rpx;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #5E5E5E;
                }
            }
        }
    }
}
</style>